<template>
  <Layout :class="prefixCls" v-bind="lockEvents">
    <LayoutHeader fixed v-if="getShowFullHeaderRef" />
    <LayoutContent />
    <LayoutFooter />
  </Layout>
</template>

<script lang="ts" setup>
  import { Layout } from 'ant-design-vue';
  import { createAsyncComponent } from '@/utils/factory/createAsyncComponent';

  import LayoutHeader from './header/index.vue';
  import LayoutContent from './content/index.vue';

  const LayoutFooter = createAsyncComponent(() => import('@/layouts/web/footer/index.vue'));

  defineOptions({ name: 'DefaultLayout' });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-default-layout';

  .@{prefix-cls} {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    background-color: @content-bg;

    > .ant-layout {
      min-height: 100%;
    }

    &-main {
      width: 100%;
      margin-left: 1px;
    }
  }

  .@{prefix-cls}-out {
    &.ant-layout-has-sider {
      .@{prefix-cls} {
        &-main {
          margin-left: 1px;
        }
      }
    }
  }
</style>
